<style lang="scss" module>
.inputWrapper {
  display: inline-block;
  input {
    text-overflow: ellipsis;
    border:none;
    border: 1px solid #dcdee2;
    border-radius: 0px 4px 4px 0px;
  }
  * {
    border-radius: 0;
  }
}
.checkWrapper {/*checkbox的外包框*/
  display:inline-flex;
  justify-content: flex-start;
  align-items: center;
  width:100%;
  height:32px;
  min-width:20px;
  padding:0 7px;
  border:none;
  border: 1px solid #dcdee2;
  border-radius: 0px 4px 4px 0px;
  background-color: #FFFFFF;
  * {
    border-radius: 0;
  }
}
.selectWrapper {/*select的外包框*/
  display:inline;
  border:none;
  * {
    border-radius: 0px 4px 4px 0px;
  }
}
.colorTransfer{
  width:auto;
}
.numberWrapper {
  width:100%;
  border:none;
  border: 1px solid #dcdee2;
  border-radius: 0px 4px 4px 0px;
  * {
    border-radius: 0;
  }
}
.dateWrapper {
  width:100%;
  border:none;
  * {
    border-radius: 0px 4px 4px 0px;
  }
}
</style>
<template>
<span>
  <Input v-if="['text'].includes(config.type)" :class="$style.inputWrapper" v-model="editValue" @on-change="change"
         type="text"
         :required="config.required"
         :placeholder="config.placeholder"
         :clearable="config.clearable"
         :disabled="config.disabled"
         :readonly="config.readonly"
         :maxlength="config.maxlength"
         :autofocus="config.autofocus"
         :autocomplete="config.autocomplete"
         :spellcheck="config.spellcheck"
  ></Input>
  <Input v-else-if="['prefixText'].includes(config.type)" :class="$style.inputWrapper" v-model="editValue" @on-change="change($event,'prefixText')"
         type="text"
         :required="config.required"
         :placeholder="config.placeholder"
         :clearable="config.clearable"
         :disabled="config.disabled"
         :readonly="config.readonly"
         :maxlength="config.maxlength"
         :autofocus="config.autofocus"
         :autocomplete="config.autocomplete"
         :spellcheck="config.spellcheck"
  ></Input>
  <Input v-else-if="config.type==='password'" :class="$style.inputWrapper" v-model="editValue" @on-change="change"
         :type="config.type"
         :required="config.required"
         :placeholder="config.placeholder"
         :clearable="config.clearable"
         :disabled="config.disabled"
         :readonly="config.readonly"
         :maxlength="config.maxlength"
         :autofocus="config.autofocus"
         :autocomplete="config.autocomplete"
         :spellcheck="config.spellcheck"
         :password="config.password"
  ></Input>
  <Input v-else-if="config.type==='url'" :class="$style.inputWrapper" v-model="editValue" @on-change="change"
         :type="config.type"
         :required="config.required"
         :placeholder="config.placeholder"
         :clearable="config.clearable"
         :disabled="config.disabled"
         :readonly="config.readonly"
         :maxlength="config.maxlength"
         :autofocus="config.autofocus"
         :autocomplete="config.autocomplete"
         :spellcheck="config.spellcheck"
  ></Input>
  <Input v-else-if="config.type==='textarea'" :class="$style.inputWrapper" v-model="editValue" @on-change="change"
         :type="config.type"
         :required="config.required"
         :placeholder="config.placeholder"
         :clearable="config.clearable"
         :disabled="config.disabled"
         :readonly="config.readonly"
         :maxlength="config.maxlength"
         :autofocus="config.autofocus"
         :autocomplete="config.autocomplete"
         :spellcheck="config.spellcheck"
         :rows="config.rows"
  ></Input>
  <Input v-else-if="config.type==='email'" :class="$style.inputWrapper" v-model="editValue" @on-change="change"
         :type="config.type"
         :required="config.required"
         :placeholder="config.placeholder"
         :clearable="config.clearable"
         :disabled="config.disabled"
         :readonly="config.readonly"
         :maxlength="config.maxlength"
         :autofocus="config.autofocus"
         :autocomplete="config.autocomplete"
         :spellcheck="config.spellcheck"
  ></Input>
  <Input v-else-if="config.type==='tel'" :class="$style.inputWrapper" v-model="editValue" @on-change="change"
         :type="config.type"
         :required="config.required"
         :placeholder="config.placeholder"
         :clearable="config.clearable"
         :disabled="config.disabled"
         :readonly="config.readonly"
         :maxlength="config.maxlength"
         :autofocus="config.autofocus"
         :autocomplete="config.autocomplete"
         :spellcheck="config.spellcheck"
  ></Input>
  <div v-else-if="config.type==='check'" :class="$style.checkWrapper">
    <Checkbox v-model="editValue" @on-change="change" style="margin-right: 0"
              :disabled="config.disabled"
    ></Checkbox>
  </div>
  <Select v-else-if="config.type==='select'" :class="$style.selectWrapper" v-model="editValue"
    @on-change="change"
    @on-select="select"
    :transfer="true"
    :placeholder="config.placeholder"
    :filterable="config.filterable"
    :filter-by-label="config.filterByLabel"
    :clearable="config.clearable"
    :disabled="config.disabled"
    :readonly="config.readonly"
    :label-in-value="config.labelInValue"
    :placement="config.placement"
    :allow-create="config.allowCreate"
  >
  <template v-for="(item,i) in config.options">
    <Option v-if="item" :key="i" v-bind="item">{{item.label}}</Option>
  </template>
  </Select>
  <Select v-else-if="config.type==='multiSelect'" :class="$style.selectWrapper" v-model="editValue"
    @on-change="change"
    @on-select="select"
    :transfer="true"
    :multiple="true"
    :placeholder="config.placeholder"
    :filterable="config.filterable"
    :filter-by-label="config.filterByLabel"
    :clearable="config.clearable"
    :disabled="config.disabled"
    :readonly="config.readonly"
    :label-in-value="config.labelInValue"
    :placement="config.placement"
  >
    <Option v-for="(item,i) in config.options" :key="i" v-bind="item">{{item.label}}</Option>
  </Select>
  <div v-else-if="config.type==='radio'" :class="$style.checkWrapper">
    <RadioGroup v-model="editValue" @on-change="change"
                :disabled="config.disabled"
    >
      <Radio v-for="(item,i) in config.options" :key="i" :label="item.value">{{item.label}}</Radio>
    </RadioGroup>
  </div>
  <div v-else-if="config.type==='multiCheck'" :class="$style.checkWrapper">
    <CheckboxGroup v-model="editValue" @on-change="change"
                   :disabled="config.disabled"
    >
      <Checkbox v-for="(item,i) in config.options" :key="i" :label="item.value">{{item.label}}</Checkbox>
    </CheckboxGroup>
  </div>
  <DatePicker v-else-if="config.type==='date'" type="date" :class="$style.dateWrapper" show-week-numbers  transfer format="yyyy-MM-dd" v-model="editValue" @on-change="change"
              :placeholder="config.placeholder"
              :clearable="config.clearable"
              :disabled="config.disabled"
              :editable="config.editable"
              :readonly="config.readonly"
              :placement="config.placement"
  ></DatePicker>
  <TimePicker v-else-if="config.type==='time'" type="time" :class="$style.dateWrapper" show-week-numbers  transfer format="HH:mm:ss" v-model="editValue" @on-change="change"
              :placeholder="config.placeholder"
              :clearable="config.clearable"
              :disabled="config.disabled"
              :editable="config.editable"
              :readonly="config.readonly"
              :placement="config.placement"
  ></TimePicker>
  <DatePicker v-else-if="config.type==='datetime'" type="datetime" :class="$style.dateWrapper" show-week-numbers  transfer format="yyyy-MM-dd HH:mm:ss" v-model="editValue" @on-change="change"
              :placeholder="config.placeholder"
              :clearable="config.clearable"
              :disabled="config.disabled"
              :editable="config.editable"
              :readonly="config.readonly"
              :placement="config.placement"
  ></DatePicker>
  <DatePicker v-else-if="config.type==='datetimeRange'" type="datetimerange" :class="$style.dateWrapper" show-week-numbers  transfer format="yyyy-MM-dd HH:mm:ss" v-model="editValue" @on-change="change"
              :placeholder="config.placeholder"
              :clearable="config.clearable"
              :disabled="config.disabled"
              :editable="config.editable"
              :readonly="config.readonly"
              :placement="config.placement"
  ></DatePicker>
  <DatePicker v-else-if="config.type==='dateRange'" type="daterange" :class="$style.dateWrapper" show-week-numbers  transfer format="yyyy-MM-dd" v-model="editValue" @on-change="change"
              :placeholder="config.placeholder"
              :clearable="config.clearable"
              :disabled="config.disabled"
              :editable="config.editable"
              :readonly="config.readonly"
              :placement="config.placement"
  ></DatePicker>
  <ColorPicker v-else-if="config.type==='color'" :class="$style.selectWrapper" v-model="editValue" transfer @on-change="change"
               :transfer="true"
               :transfer-class-name="$style.colorTransfer"
               :disabled="config.disabled"
               :editable="config.editable"
               :placement="config.placement"
  />
  <div v-else-if="config.type==='switch'" :class="$style.checkWrapper">
    <i-switch v-model="editValue" @on-change="change"
              :disabled="config.disabled"
    ></i-switch>
  </div>
  <Input v-else-if="config.type==='array'" :class="$style.inputWrapper" v-model="editValue" @on-change="change($event,'array')"
         :type="'text'"
         :required="config.required"
         :placeholder="config.placeholder"
         :clearable="config.clearable"
         :disabled="config.disabled"
         :readonly="config.readonly"
         :maxlength="config.maxlength"
         :autofocus="config.autofocus"
         :autocomplete="config.autocomplete"
         :spellcheck="config.spellcheck"
  ></Input>
  <InputNumber v-else-if="config.type==='number'" :class="$style.numberWrapper" v-model="editValue" @on-change="change"
               :min="config.min"
               :max="config.max"
               :step="config.step"
               :precision="config.precision"
               :placeholder="config.placeholder"
               :editable="config.editable"
               :disabled="config.disabled"
               :readonly="config.readonly"
  ></InputNumber>
  <InputNumber v-else-if="config.type==='percent'" :class="$style.numberWrapper" v-model="editValue" @on-change="change"
               :min="config.min"
               :max="config.max"
               :step="config.step"
               :precision="config.precision"
               :placeholder="config.placeholder"
               :editable="config.editable"
               :disabled="config.disabled"
               :readonly="config.readonly"
               :formatter="value => `${(value*100).toFixed(config.precision)}%`"
               :parser="value => value.replace('%', '')/100"
  ></InputNumber>
  <Input v-else-if="config.type==='link'" :class="$style.inputWrapper" v-model="editValue" @on-change="change"
         :type="'text'"
         :required="false"
         :placeholder="config.placeholder"
         :clearable="false"
         :disabled="config.disabled"
         :readonly="true"
  >
    <Icon slot="suffix" type="md-arrow-dropright" @click="suffixClick"/>
  </Input>
  <Cascader v-else-if="config.type==='cascader'" :class="$style.selectWrapper" v-model="editValue" @on-change="change($event,'cascader')"
            :data="config.options"
            :transfer="true"
            :placeholder="config.placeholder"
            :filterable="config.filterable"
            :clearable="config.clearable"
            :disabled="config.disabled"
            :readonly="config.readonly"
            :placement="config.placement"
  ></Cascader>
  <Input v-else :class="$style.inputWrapper" v-model="editValue" @on-change="change"
         :type="'text'"
         :required="false"
         :placeholder="config.placeholder"
         :clearable="false"
         :disabled="config.disabled"
         :readonly="true"
  ></Input>
  </span>
</template>

<script>
export default {
  name: "cfg-Cell",
  data(){
    return {
      editValue:null,
    }
  },
  model:{
    prop:'value',
    event:"change"
  },
  props:{
    value:{
      default:()=>{
        return null;
      }
    },
    config:{
      default:()=>{
        return {};
      }
    },
  },
  computed:{

  },
  watch:{
    value:function(newVal){
      if(this.config.type==='array'&&Array.isArray(newVal)){
        this.editValue=newVal.join(',');
      }else if (this.config.type==='prefixText') {
        this.editValue=newVal.replace(this.config.prefix, '');
      }else{
        this.editValue=newVal;
      }
    }
  },
  mounted() {
    if(this.config.type==='array'&&Array.isArray(this.value)){
      this.editValue=this.value.join(',');
    }else if (this.config.type==='prefixText') {
      this.editValue=this.value.replace(this.config.prefix, '');
    }else{
      this.editValue=this.value;
    }
  },
  methods:{
    change(value,editor){
      // debugger
      // console.log("🚀 ~ file: cfg-cell.vue:357 ~ change ~ value:", value,editor, this.config)
      if(editor==='array'){
        this.$emit('change',this.editValue.split(','))
      }else if(editor==='cascader'){
        this.$emit('change',value)
      }else if (editor==='prefixText') {
        this.$emit('change', this.config.prefix + this.editValue)
      }else {
        this.$emit('change',this.editValue)
      }
    },
    select(value,editor){
        this.$emit('select', value)
    },
    suffixClick(){
      this.editValue=this.config.link(this.config.dataIndex,this.editValue)
    }
  }
}
</script>
